<template>
    <div class="main_wrap">
        <div class="content_wrap">
            <div>
              <img v-if="pictures.lenght>0"
                style="width: 100%;max-height:350px;margin-right:5px;"
                :src=pictures
                alt="暂无图片"
              >
              <div v-else style="width:96%;margin: 0px 4px;height:30%;border-bottom: 1px solid #ddd;"></div>
            </div>
            <div class="info_wrap">
                <table>
                    <tr>
                        <td class="name">设备名称</td>
                        <td>{{deviceName}}</td>
                    </tr>
                    <tr>
                        <td class="name">设备编号</td>
                        <td>{{deviceCode}}</td>
                    </tr>
                    <tr v-if="componentName">
                        <td class="name">部件名称</td>
                        <td>{{componentName}}</td>
                    </tr>
                    <tr v-if="componentCode">
                        <td class="name">部件编号</td>
                        <td>{{deviceCode}}</td>
                    </tr>
                    <tr>
                        <td class="name">所在部门</td>
                        <td>{{departmentName}}</td>
                    </tr>
                    <tr>
                        <td class="name">点巡检结果</td>
                        <td v-if="checkResult == 1">正常</td>
                        <td v-else-if="checkResult == 2">轻微故障</td>
                        <td v-else-if="checkResult == 3">中度故障</td>
                        <td v-else-if="checkResult == 4">重度故障</td>
                        <td v-else></td>
                    </tr>
                    <tr>
                        <td class="name">点巡检时间</td>
                        <td v-if="checkTime">{{checkTime | formatDate}}</td>
                        <td v-else></td>
                    </tr>
                    <tr>
                        <td class="name">执行人</td>
                        <td>{{operatorName}}</td>
                    </tr>
                </table>
            </div>
            <div class="spotCheckDescribe">
                <span style="color:rgba(255,255,255,0.5)">点巡检标准</span>
                <p style="margin-top:10px;">{{checkDescribe}}</p>
            </div>
            <div class="workOrderDescribe" v-if="sheetDescription">
                <span style="color:rgba(255,255,255,0.5)">工单描述</span>
                <p style="margin-top:10px;">{{sheetDescription}}</p>
            </div>
            <div class="processStatus" v-if="dealStatus">
                <span style="color:rgba(255,255,255,0.5)">处理状态</span>
                <span v-if="dealStatus == 11" style="margin-left:20px;">已关闭</span>
            </div>
            <!-- <div class="deviceContent" ref="deviceContent">
                <div class="timeLine" v-for="(item, index) in workSheetList" :key="index">
                <img v-if="item.handleType === 3" class="timeImg" src="../../assets/icon/finished.png" alt="上报">
                <img v-if="item.handleType === 1" class="timeImg" src="../../assets/icon/report.png" alt="转办">
                <img v-if="item.handleType === 2" class="timeImg" src="../../assets/icon/transfer.png" alt="解决">
                <img v-if="item.handleType === 4" class="timeImg" src="../../assets/icon/reject.png" alt="驳回">
                <div class="timeleft">
                    <p>{{item.updateTime | formatDate}}</p>
                </div>
                <div class="timemiddle">
                    <div class="container" v-if="index != workSheetList.length-1"></div>
                    <p>{{item.actOperatorName}}</p>
                    <p>{{item.description}}</p>
                </div>
                <div class="timeright">
                    <p v-if="index == workSheetList.length-1">提交</p>
                    <p v-else-if="item.handleType == 1">上报</p>
                    <p v-else-if="item.handleType == 2">转办</p>
                    <p v-else-if="item.handleType == 3">解决</p>
                    <p v-else-if="item.handleType == 4">驳回</p>
                </div>
                </div>
            </div> -->
            <div class="deviceContent" ref="deviceContent">
                <div class="timeLine" v-for="(item, index) in workSheetList" :key="index">
                <div class="timeleft">
                    <p>{{item.updateTime | formatDate}}</p>
                </div>
                <div :class="index == 0?'groupImg':'groupImg1'">
                    <div class="imgBorder">
                    <p class="borderSty" v-if="index == workSheetList.length-1">提交</p>
                    <p class="borderSty" v-else-if="item.handleType != 3&&index == 0">负责人</p>
                    <p class="borderSty" v-else-if="item.handleType == 1">上报</p>
                    <p class="borderSty" v-else-if="item.handleType == 2">转办</p>
                    <p class="borderSty" v-else-if="item.handleType == 3">解决</p>
                    <p class="borderSty" v-else-if="item.handleType == 4">驳回</p>
                    </div>
                    <iconSvg style="margin: 3px 6px;position:relative;top:-5px;" v-if="index != workSheetList.length-1 && index == 0" name='arrow1' w="15px" h="15px"></iconSvg>
                    <iconSvg style="margin: 3px 6px;position:relative;top:-5px;" v-else-if="index != workSheetList.length-1" name='arrow2' w="15px" h="15px"></iconSvg>
                    <div class='arrowLine' v-if="index != workSheetList.length-1 && index == 0" style="border-left:2px dotted #456de6;height:85%;position:relative;left: 22px;top: -13px;"></div>
                    <div class='arrowLine' v-else-if="index != workSheetList.length-1" style="border-left:2px solid #2c386e;height:85%;position:relative;left: 22px;top: -13px;"></div>
                </div>
                <div class="timemiddle">
                    <div style="height:5%;font-size:16px;">
                    <div style="width:75%;float:left;text-align:left;" v-if="item.handleType != 3&&index == 0">{{item.operatorName}}</div>
                    <div style="width:75%;float:left;text-align:left;" v-else>{{item.actOperatorName}}</div>
                    <div style="width:25%;float:right;text-align:right;">
                        <p v-if="index == workSheetList.length-1">提交</p>
                        <p v-else-if="item.handleType != 3&&index == 0"></p>
                        <p v-else-if="item.handleType == 1">上报</p>
                        <p v-else-if="item.handleType == 2">转办</p>
                        <p v-else-if="item.handleType == 3" style="color:#456de6;">解决</p>
                        <p v-else-if="item.handleType == 4">驳回</p>
                    </div>
                    </div>
                    <div style="width:75%;height:85%;word-break: break-all;margin-top:10px;font-size:16px;">
                    <div v-if="index == 0&&item.handleType != 3"></div>
                    <div v-else>{{item.description}}</div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div> 
</template>
<script>
import { XTable} from 'vux'
import { constants } from 'crypto';
import BScroll from "better-scroll";

export default {
    components: {
        XTable,
        BScroll
    },
    data(){
        return {
            name:'',
            CheckInfo:'',
            departmentName:'',
            componentId:'',
            componentName:'',
            componentCode:'',
            deviceName:'',
            deviceCode:'',
            checkTime:'',
            checkResult:'',
            checkDescribe:'',
            sheetDescription:'',
            dealStatus:'',
            pictures:[],
            checkRecordId:'',
            workSheetList:[],
            operatorName:''
        }
    },
   created() {
    this.getRouterData()
    },
    mounted:function(){
    //   this.$nextTick(() => {
    //       this.Scroll = new BScroll(this.$refs.deviceContent,{click: true, tap: true});
    //   });
    },
    methods: {
        getRouterData() {
            var param = {}
            this.CheckInfo = this.$route.query;
            /* if(this.CheckInfo.CheckInfo){
                this.operatorName = this.CheckInfo.CheckInfo.operatorName
            } */
            if(!this.CheckInfo.queryName){
                this.checkRecordId = this.CheckInfo.id         
                if(this.CheckInfo.name == 'componentCheck'){
                    param = {
                        id: this.checkRecordId,
                        type: 1
                    }
                }else if(this.CheckInfo.name == 'deviceCheck'){
                    param = {
                        id: this.checkRecordId,
                        type: 0
                    }
                }
                this.getWorkSheet(this.checkRecordId,param.type);  
                // 获取点巡检记录详情
                this.$http(this.$API.loadCheckDetail, param, true).then((res)=>{
                    this.deviceName = res.deviceName
                    this.deviceCode = res.code
                    this.departmentName = res.departmentName
                    this.componentName = res.componentName
                    this.componentCode = res.componentCode
                    this.checkResult = res.checkStatus
                    this.checkDescribe = res.description
                    if(res.pictures.length >0){
                        this.pictures = res.pictures[0]
                    }
                    if(res.sheetDescription && res.status){
                        this.sheetDescription =res.sheetDescription
                        this.dealStatus = res.status
                    }
                })
            }else{ 
                //获取点巡检记录详情
                this.checkRecordId = this.CheckInfo.id  

                if(this.CheckInfo.name == 'componentRecord'){
                    param ={
                        id: this.checkRecordId,
                        type: 1
                    }
                }else if(this.CheckInfo.name == 'deviceRecord'){
                    param ={
                        id: this.checkRecordId,
                        type: 0
                    }
                }
                this.getWorkSheet(this.checkRecordId,param.type);         
                this.$http(this.$API.loadCheckDetail, param, true).then((res)=>{
                    this.deviceName = res.deviceName
                    this.deviceCode = res.code
                    this.departmentName = res.departmentName
                    this.componentName = res.componentName
                    this.componentCode = res.componentCode
                    this.checkResult = res.checkStatus
                    this.checkDescribe = res.description
                    this.checkTime = res.time;
                    this.operatorName = res.operatorName;
                    if(res.pictures.length >0){
                        this.pictures = res.pictures[0]
                    }
                    if(res.sheetDescription && res.status){
                        this.sheetDescription =res.sheetDescription
                        this.dealStatus = res.status
                    }
                })
            }
        },

        getWorkSheet: function(id,type){
          console.log(type);
            this.$http(this.$API.getCheckWorkSheet,{checkId:id,type:type},true).then((data)=>{
                this.workSheetList = data
                /* if(!!data[0]){
                    this.operatorName = data[0].actOperatorName
                } */
            })
        }
    }
}
</script>
<style lang="less" scoped>
    body{
        background-color: #22233f;
        height: 100%;
        width: 100%;
    }
    .main_wrap{
        margin: 0 auto;
        height: 100%;
        width: 100%;
        padding-bottom: 20px;
    }
    .content_wrap{
        height: 100%;
        overflow-y: auto;
    }
    .info_wrap{
        padding:10px;
    }
    table{
        width:100%;
        line-height: 40px;
        font-size: 14px;
        color:#fff;
        /* border-bottom: 1px solid; */
        border-color: rgba(255, 255, 255, 0.5)
    }
    table .name{
        color: rgba(255, 255, 255, 0.5);
        width: 25%;
    }
    .spotCheckDescribe,.workOrderDescribe,.processStatus{
        color: #fff;
        font-size: 16px;
        padding:30px 10px;
        border-bottom: 1px solid;
        border-color:rgba(255, 255, 255, 0.5);
    }


    .orderDetail{
    background: #22233f;
    height: auto;
    position: absolute;
  }
  .deviceInfo{
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .info{
    line-height: 0.7rem;
    font-size: 16px;
    margin-bottom: 1rem;
  }
  .title{
    color: #ddd;
    margin-right: 0.5rem;
  }
  .titleContent{
    color: #fff;
  }
  .line{
    border-bottom: 1px solid #ddd;
    margin: 0.5rem auto;
  }

  .timeLine{
    display: flex;
    color: #fff;
    /* // margin-top: 1rem; */
    position: relative;
  }
  .timemiddle{
    flex: 3;
    padding-left: 1rem;
  }
  .timeright{
    flex: 1;
    line-height: 1rem;
    text-align: right;
  }
  .timeImg{
    width: 25px;
    height: 25px;
    position: absolute;
    left: 29%;
     /* margin-top: 5px;
     bottom: 2rem; */
  }
  .deviceContent{
    padding:20px;
    background-color: #22233f;
    overflow: auto;
  }
  .deviceContent .timeLine:last-child .timemiddle{
    border: none;
  }

  .slide-enter-active {
      animation-name: slideInUp;
      animation-duration: 0.2s;
      animation-fill-mode: both;
  }
  .slide-leave-active {
      animation-name: slideOutDown;
      animation-duration: 0.2s;
      animation-fill-mode: both;
  }
  @keyframes slideInUp {
      0% {
          transform: translate3d(0, 100%, 0);
          visibility: visible;
      }

      to {
          transform: translateZ(0);
      }
  }
  @keyframes slideOutDown {
      0% {
          transform: translateZ(0);
      }

      to {
          visibility: hidden;
          transform: translate3d(0, 100%, 0);
      }
  }
  .delay-leave-active {
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      -o-animation-delay: 0.2s;
      animation-delay: 0.2s;
  }

  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #323465;
    border-radius: 4px;
    background-clip: padding-box;
    height: 125px;
    /* line-height: 125px; */
    img{
      width: 40px;
      height: 40px;
      margin-bottom: 5px;
    }
    .lineImg1{
      margin-top: 35px;
    }
    .lineImg2{
      margin-top: 20px;
    }
  }
  .process_wrap{
    padding:10px;
    text-align:center;
  }
  .process_wrap button{
    height: 45px;
    width:70%;
    background-color: #456de6;
    border-radius: 20px;
    border:none;
    color:#fff;
    font-size: 16px;
    left:15%;
  }
  .container{
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent #456de6 transparent;
    position: relative;
    right: 48px;
    top: 45px;
  }

  * { touch-action: none; }
  .orderDetail{
    background: #22233f;
    height: auto;
    position: absolute;
    width:100%;
  }
  .deviceInfo{
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .info{
    line-height: 0.7rem;
    font-size: 16px;
    margin-bottom: 1rem;
  }
  .title{
    color: #ddd;
    margin-right: 0.5rem;
  }
  .titleContent{
    color: #fff;
  }
  .line{
    border-bottom: 1px solid #ddd;
    margin: 0.5rem auto;
  }

  .timeLine{
    display: flex;
    color: #fff;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .timeleft{
    width:20%;
  }
  .groupImg{
    width: 14%;
    text-align:center;
    position: relative;
    top:-5px;
    .imgBorder{
      width: 40px;
      height: 40px;
      border-radius: 4em;
      background: #456de6;
      line-height: 35px;
      text-align:center;
      margin: 2px 4px;
      .borderSty{
        color:#fff;
        font-size:12px;
        position: relative;
        top: 2px;
      }
    }
  }

  .groupImg1{
    width: 14%;
    text-align:center;
    position: relative;
    top:-5px;
    .imgBorder{
      width: 40px;
      height: 40px;
      border-radius: 4em;
      background: #4b61ac;
      line-height: 35px;
      text-align:center;
      margin: 2px 4px;
      .borderSty{
        color:#fff;
        font-size:12px;
        position: relative;
        top: 2px;
      }
    }
  }
  .timemiddle{
    width: 75%;
    flex: 3;
    padding-left: 5px;
    position:relative;
    top:5px;
  }

  
  /* iphone6 plus */
  @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    .arrowLine{
      position:relative !important;
      left: 22px !important;
      top: -13px !important;
    }
  }

   @media screen and (min-width:320px) and (max-width:414px){
     .arrowLine{
      position:relative !important;
      left: 23px !important;
    }
    .groupImg{
      .imgBorder{
        height: 40px !important;
        width: 40px !important;
      }
    }

    .groupImg1{
      .imgBorder{
        height: 40px !important;
        width: 40px !important;
      }
    }
    
   }

  .timeImg{
    width: 25px;
    height: 25px;
    position: absolute;
    left: 29%;
    // margin-top: 5px;
    // bottom: 2rem;
  }

  .deviceContent .timeLine:last-child .timemiddle{
    border: none;
  }

  .slide-enter-active {
      animation-name: slideInUp;
      animation-duration: 0.2s;
      animation-fill-mode: both;
  }
  .slide-leave-active {
      animation-name: slideOutDown;
      animation-duration: 0.2s;
      animation-fill-mode: both;
  }
  @keyframes slideInUp {
      0% {
          transform: translate3d(0, 100%, 0);
          visibility: visible;
      }

      to {
          transform: translateZ(0);
      }
  }
  @keyframes slideOutDown {
      0% {
          transform: translateZ(0);
      }

      to {
          visibility: hidden;
          transform: translate3d(0, 100%, 0);
      }
  }
  .delay-leave-active {
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      -o-animation-delay: 0.2s;
      animation-delay: 0.2s;
  }

  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #323465;
    border-radius: 4px;
    background-clip: padding-box;
    height: 125px;
    /*line-height: 125px;*/
    img{
      width: 40px;
      height: 40px;
      margin-bottom: 5px;
    }
    .lineImg1{
      margin-top: 35px;
    }
    .lineImg2{
      margin-top: 20px;
    }
  }
  .processWrap{
    padding:15px 0px;
    text-align:center;
  }
  .processWrap button{
    height: 45px;
    width:100%;
    background-color: #456de6;
    border-radius: 20px;
    border:none;
    color:#fff;
    font-size: 16px;
    left:15%;
  }
  .container{
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent #456de6 transparent;
    position: relative;
    right: 48px;
    top: 45px;
  }
</style>


